<!--
 * @Descripttion: 文章设置
 * @Author: xiao li
 * @Date: 2020-07-06 12:17:07
 * @LastEditors: xiao li
 * @LastEditTime: 2021-04-28 17:42:34
-->
<template>
  <div>
    <top-nav></top-nav>
    <div class="page-main">
      <el-form @submit.native.prevent :model="settingForm" label-width="140px">
        <el-form-item label="自动同步" prop="check_switch">
          <el-radio-group v-model="settingForm.check_switch">
            <el-radio :label="0">关闭</el-radio>
            <el-radio :label="1">开启</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="分享页面名片入口" prop="look_card">
          <el-radio-group v-model="settingForm.look_card">
            <el-radio :label="0">关闭</el-radio>
            <el-radio :label="1">开启</el-radio>
          </el-radio-group>
          <el-button
            @click="showDialog = true"
            type="small"
            class="show-btn"
            style="margin-left: 20px"
            >查看示例</el-button
          >
        </el-form-item>
        <el-form-item label="公众号appid" prop="gzh_appid">
          <el-input
            v-model="settingForm.gzh_appid"
            placeholder="请输入公众号appid"
          ></el-input>
        </el-form-item>
        <el-form-item label="公众号AppSecret" prop="gzh_secret">
          <el-input
            v-model="settingForm.gzh_secret"
            placeholder="请输入公众号AppSecret"
          ></el-input>
        </el-form-item>
        <el-form-item label="小程序Token" prop="mini_token">
          <el-input
            v-model="settingForm.mini_token"
            placeholder="请输入小程序Token"
          ></el-input>
        </el-form-item>
        <el-form-item label="小程序Url" prop="mini_url">
          <el-input
            v-model="settingForm.mini_url"
            :disabled="true"
            placeholder="小程序Url"
          ></el-input>
          <span
            style="margin-left: 10px; color: #409eff"
            v-clipboard:copy="settingForm.mini_url"
            v-clipboard:success="onCopy"
            v-clipboard:error="onError"
            >复制</span
          >
        </el-form-item>
        <el-form-item>
          <lb-button @click="submitFormInfo" type="primary">{{
            $t('action.submit')
          }}</lb-button>
        </el-form-item>
      </el-form>

      <div class="space-lg"></div>
      <div class="space-lg"></div>
      <div class="space-lg"></div>

      <el-dialog
        title="查看示例"
        :visible.sync="showDialog"
        width="400px"
        center
      >
        <div class="flex-center">
          <img
            class="look-image"
            src="https://lbqny.migugu.com/admin/article/look.png"
          />
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="showDialog = false">知道了</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      showDialog: false,
      settingForm: {
        check_switch: 0,
        look_card: 1,
        gzh_appid: '',
        gzh_secret: '',
        mini_token: '',
        mini_url: ''
      }
    }
  },
  created () {
    this.getFormInfo()
  },
  methods: {
    onCopy (e) {
      this.$message.success(this.$t('tips.successClip'))
    },
    onError (e) {
      this.$message.success(this.$t('tips.failedClip'))
    },
    getFormInfo () {
      this.$api.getArticleSettingInfo().then(res => {
        if (res.code === 200) {
          for (let key in this.settingForm) {
            this.settingForm[key] = res.data[key]
          }
        }
      })
    },
    submitFormInfo () {
      let {
        settingForm
      } = this
      this.$api.settingArticleInfo(settingForm).then(res => {
        if (res.code === 200) {
          this.$message.success(this.$t('tips.successSub'))
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.page-main {
  .el-input {
    width: 500px;
  }
  .look-image {
    width: 297px;
    height: 532px;
    border-radius: 10px;
    border: 1px solid #eee;
  }
}
</style>
